<template>
    <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
        @close="close"
    >
        <el-form ref="form" :model="form" :rules="rules" label-width="105px">
            <el-form-item label="父级菜单" prop="parent_id">
                <el-cascader ref="elcascader"
                             @visible-change="elCascaderOnlick"
                             @expand-change="elCascaderOnlick"
                             @change="regionHandleChange"
                             v-model="selectedOptions"
                             :props="{ checkStrictly: true, expandTrigger: 'hover' }"
                             :options="menus">
                </el-cascader>


            </el-form-item>
            <el-form-item label="菜单名称" prop="menu_name">
                <el-input v-model="form.menu_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="Vue路由路径" prop="vue_path">
                <el-input v-model="form.vue_path" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="Vue的redirect" prop="vue_redirect">
                <el-input v-model="form.vue_redirect" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图标" prop="vue_icon">
                <e-icon-picker v-model="form.vue_icon" autocomplete="off" />
            </el-form-item>
            <el-form-item label="Vue文件路径" prop="vue_component">
                <el-input v-model="form.vue_component" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="Vue的meta" prop="vue_meta">
                <el-input v-model="form.vue_meta" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="外链" prop="external_links">
                <el-input v-model="form.external_links" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="接口路由" prop="api_url">
                <el-input v-model="form.api_url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="请求方式" prop="api_method">
                <el-select v-model="form.api_method" placeholder="请求方式" autocomplete="off">
                    <el-option
                            v-for="item_m in methodArray"
                            :key="item_m.menu_id"
                            :checked="item_m.method_name == form.api_method"
                            :label="item_m.method_name"
                            :value="item_m.method_name"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="排序" prop="menu_sort">
                <el-input v-model="form.menu_sort" type="number" autocomplete="off" value="0"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {create, update, getMenusSelect} from "@/api/admin/system/admin_menus";

    export default {
        name: "",
        data() {
            return {
                form: {},
                menus:[], // 父级
                methodArray:[
                    {method_name:'POST'},
                    {method_name:'PUT'},
                    {method_name:'GET'},
                    {method_name:'DELETE'},
                    {method_name:'PATCH'},
                    {method_name:'OPTIONS'},
                    {method_name:'HEAD'},
                    ], // 请求方式
                rules: {
                    id: [{required: true, trigger: "blur", message: "请输入路径"}],
                },
                title: "",
                dialogFormVisible: false,
                add_host_Form: {
                    group_id: null
                },
                selectedOptions:[],
            };
        },
        created() {
            this.getMenusSelect();
        },
        methods: {
            // 获取选中的数据，进行赋值操作
            regionHandleChange(arr) {
                // arr是选中的数组eg:[1, 5]，但因为后台数据库设计暂时不支持数组传参，后台只要选中的节点的值，所以我将数组最后一个值取出来进行赋值操作
                // 注意：这里要传的值相当于id，父子节点都是唯一的
                if (arr) {
                    // 此方法返回的是一个元素，eg:5
                    this.form.parent_id = arr[arr.length - 1];
                }
            },
            // 触发click事件，关闭下拉框
            elCascaderOnlick() {
                let that = this;
                // .el-cascader-node__label 和 .el-cascader-panel .el-radio 这是Element级联选择器的类，可以参考下方截图
                setTimeout(function() {
                    document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
                        el.onclick = function() {
                            this.previousElementSibling.click();
                            // 选中span标签后，关闭下拉框
                            that.$refs.elcascader.dropDownVisible = false;
                        };
                    });
                    document.querySelectorAll(".el-cascader-panel .el-radio")
                        .forEach((el) => {
                            el.onclick = function() {
                                // 选中radio后，关闭下拉框
                                that.$refs.elcascader.dropDownVisible = false;
                            };
                        });
                }, 100);
            },
            // 获取菜单列表
            async getMenusSelect() {
                const res = await getMenusSelect();
                this.menus = res.data;
            },
            showEdit(row,i) {
                if (!row) {
                    this.title = "添加";
                } else {
                    if (i==1){
                        this.title = "编辑";
                        this.form = Object.assign({}, row);
                    } else {
                        console.log(row)
                        this.title = "添加子菜单";
                        var menu_ids = row.menu_id
                        if (row.parent_id!=0){
                            var parent_ids = row.parent_id
                            this.selectedOptions =[parent_ids,menu_ids]
                        } else {
                            this.selectedOptions =[row.menu_ids]
                        }
                        console.log(this.form)
                        this.form = {}
                        console.log(this.form)
                    }
                }
                this.dialogFormVisible = true;
            },
            close() {
                this.$refs["form"].resetFields();
                this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
            save() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        const {msg, status} = this.form.menu_id ? await update(this.form) : await create(this.form);

                        switch (status) {
                            case 1:
                                this.$message({
                                    message: msg,
                                    type: 'success'
                                });

                                this.$emit("fetchData");
                                this.close();
                                break;
                            default:
                                this.$message({
                                    message: msg,
                                    type: 'error'
                                });
                                break;
                        }
                    } else {
                        return false;
                    }
                });
            },
            // 节点点击事件
            handleNodeClick(data) {
                // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
                this.select_category_name = data.category_name;
                this.postForm.category_id = data.category_id;

                // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
                this.$refs.selectUpCategoryId.blur();
            },
        },
    };
</script>
